<template>
  <div class="top-nav">
    <router-link to="/"><span>推荐音乐</span></router-link>
    <router-link to="/hot"><span>热歌榜</span></router-link>
    <router-link to="/search"><span>搜索</span></router-link>
  </div>
</template>
<style lang="less" scoped>
.top-nav {
  display: flex;
  background: white;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  position: sticky;
  top: -1px;
  justify-content: space-around;
  z-index: 5;
  width: 100%;
  align-items: center;
  height: 40px;
  background-color: #fff;
  & > a {
    color: black;
    text-align: center;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 40px;
    padding: 0 5px;
    position: relative;
    &.top-nav-link-exac-active {
      color: red;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        z-index: 3;
        width: 100%;
        height: 4px;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        background: #dd001b;
      }
    }

    span {
      display: inline-block;
    }
  }
  
}
</style>